<div class="animate">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header card-primary card-inverse">
                    <span class="card-title">Buttons</span>
                </div>
                <div class="card-block">
                    <p>
                    <button type="button" class="btn btn-secondary btn-rounded">Default Button</button>
                    <button type="button" class="btn btn-primary btn-rounded">Primary Button</button>
                    <button type="button" class="btn btn-success btn-rounded">Success Button</button>
                    <button type="button" class="btn btn-info btn-rounded">Info Button</button>
                    <button type="button" class="btn btn-warning btn-rounded">Warning Button</button>
                    <button type="button" class="btn btn-danger btn-rounded">Danger Button</button>
                    </p>
                <hr>
                    <p>
                   <button type="button" class="btn btn-secondary">Default Button</button>
                    <button type="button" class="btn btn-primary">  Primary Button</button>
                    <button type="button" class="btn btn-success">Success Button</button>
                    <button type="button" class="btn btn-info">Info Button</button>
                    <button type="button" class="btn btn-warning">Warning Button</button>
                    <button type="button" class="btn btn-danger">Danger Button</button>
                    </p>
                <hr>
                    <p>
                    <button type="button" class="btn btn-secondary btn-bordered">Default Button</button>
                    <button type="button" class="btn btn-info btn-bordered">Info Button</button>
                    <button type="button" class="btn btn-primary btn-bordered">Primary Button</button>
                    <button type="button" class="btn btn-success btn-bordered">Success Button</button>
                    <button type="button" class="btn btn-warning btn-bordered">Warning Button</button>
                    <button type="button" class="btn btn-danger btn-bordered">Danger Button</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header card-primary card-inverse">
                    <span class="card-title">Loading Buttons</span>
                </div>
                <div class="card-block">
                    <p>
                        <button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submit</button>&nbsp;
                        <button class="progress-button" data-style="rotate-angle-top" data-perspective data-horizontal>Submit</button>&nbsp;
                        <button class="progress-button" data-style="rotate-angle-left" data-perspective data-vertical>Submit</button>&nbsp;
                        <button class="progress-button" data-style="rotate-angle-right" data-perspective data-vertical>Submit</button>&nbsp;
                    </p>
                <hr>
                    <p>
                        <button class="progress-button" data-style="rotate-side-down" data-perspective data-horizontal>Submit</button>&nbsp;
                        <button class="progress-button" data-style="rotate-side-up" data-perspective data-horizontal>Submit</button>&nbsp;
                        <button class="progress-button" data-style="rotate-side-left" data-perspective data-vertical>Submit</button>&nbsp;
                        <button class="progress-button" data-style="rotate-side-right" data-perspective data-vertical>Submit</button>
                    </p>
                <hr>
                    <p>
                        <button class="progress-button" data-style="rotate-back" data-perspective data-horizontal>Submit</button>&nbsp;
                        <button class="progress-button" data-style="flip-open" data-perspective data-horizontal>Submit</button>&nbsp;
                        <button class="progress-button" data-style="slide-down" data-horizontal>Submit</button>&nbsp;
                        <button class="progress-button" data-style="move-up" data-horizontal>Submit</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header card-primary card-inverse">
                    <span class="card-title">Button Sizes</span>
                </div>
                <div class="card-block">
                    <p>
                        <button type="button" class="btn btn-success btn-rounded btn-sm">Small Button</button>
                    </p>
                    <p>
                        <button type="button" class="btn btn-danger btn-rounded">Normal Button</button>
                    </p>
                    <p>
                        <button type="button" class="btn btn-info btn-rounded btn-lg">Large Button</button>
                    </p>
                    <p>
                        <button type="button" class="btn btn-warning btn-block btn-rounded">Block Level Button</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header card-primary card-inverse">
                    <span class="card-title">Button Groups</span>
                </div>
                <div class="card-block">
                    <p>
                    </p><div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary">Primary Button</button>
                    <button type="button" class="btn btn-secondary">Default Button</button>
                </div>
                <p></p>
                <hr>
                <h5>Justified Button Groups</h5>
                <p></p>
                <div class="btn-group btn-group-justified" role="group">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary">Primary </button>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-info">Info</button>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-warning">Warning</button>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-danger">Danger</button>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header card-primary card-inverse">
                    <span class="card-title">Buttons with Icons</span>
                </div>
                <div class="card-block">
                    <button type="button" class="btn btn-primary btn-circle btn-lg"><i class="fa fa-google"></i></button>
                    <button type="button" class="btn btn-info btn-circle btn-lg"><i class="fa fa-facebook"></i></button>
                    <button type="button" class="btn btn-warning btn-rounded">Download&nbsp;&nbsp;<i class="fa fa-download"></i></button>
                    <button type="button" class="btn btn-success btn-bordered"><i class="fa fa-plus"></i>&nbsp;&nbsp;View More</button>
                    <button type="button" class="btn btn-danger"><i class="fa fa-phone"></i>&nbsp;&nbsp;Call Us!</button>
                </div>
            </div>
        </div>
    </div>
</div>
